<template>
    <div class="info_wrapper">
       <h3>基本信息</h3>
       <el-divider></el-divider>
       <div class="avatar" style="width: 200px;">
          <el-upload
            class="upload-demo"
            :action="upAvatar(userInfo.id)"
            :show-file-list="false"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList"
            :on-success="success"
             >
          <img :src="getPoster(userInfo.avatar)" class="avatar" />
          <el-button type="primary">更换头像</el-button>
        </el-upload>
           
       </div>
       <el-form class="userInfo" ref="userInfoForm" :model="userInfo"  label-width="70px">
        <el-form-item prop="name" label="昵称">
          <el-input v-model="userInfo.name" clearable></el-input>
        </el-form-item>
         <el-form-item prop="sex" label="性别">
          <el-radio v-model="userInfo.sex" label="男">男</el-radio>
          <el-radio v-model="userInfo.sex" label="女">女</el-radio>
        </el-form-item>
          <el-form-item prop="birth" label="生日">
         <el-date-picker
          v-model="userInfo.birth"
          type="date"
          placeholder="选择日期"
          :clearable="false"
        >
        </el-date-picker>
        </el-form-item>
        <el-form-item prop="sign" label="个人简介">
          <el-input
  type="textarea"
  placeholder="请输入内容"
  v-model="userInfo.sign"
  maxlength="30"
  show-word-limit
  resize="none"
></el-input>
        </el-form-item>
        <el-button type="primary" @click="saveInfo">保存</el-button>
       </el-form>
    </div>
</template>
<script>
export default {
data(){
return{
    userInfo:{},
	fileList:[]
}
},
created(){
    if(window.sessionStorage.getItem('id') != null){
       this.getUserInfo()
    }
},
methods:{
    async getUserInfo(){
        let id = window.sessionStorage.getItem("id")
        const {data:result} = await this.$http.get(`/user/getUserInfo/${id}`)
        if(result.status!== 200)  return this.$message.error("获取用户失败")
        this.userInfo = result.data
        window.sessionStorage.setItem('avatar',this.userInfo.avatar)
        window.sessionStorage.setItem('name',this.userInfo.name)
        },
	      handleRemove(file, fileList) {
	        console.log(file, fileList);
	      },
	      handlePreview(file) {
	        console.log(file);
	      },
	      handleExceed(files, fileList) {
	        this.$message.warning(`当前限制选择 3个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
	      },
	      beforeRemove(file, fileList) {
	        return this.$confirm(`确定移除 ${ file.name }？`);
	      },
		  success(response, file) {
		     if(response.status!==200) return this.$message.error("文件上传失败")
		     this.$message.success("文件上传成功")
		     this.getUserInfo()
		  },
    async saveInfo(){
        if(typeof(this.userInfo.birth)!='string' && this.userInfo.birth != null){
         this.userInfo.birth = this.formatDate(this.userInfo.birth,1)
        }
        const {data:result} = await this.$http.post('/user/saveUserInfo',this.userInfo)
        if(result.status !== 200) return this.$message.error("保存失败")
        this.$message.success("保存成功")
		this.getUserInfo()
    },
	getPoster(avatar){
	        return 'http://'+ avatar
	},
	upAvatar(id){
		return `http://localhost:9090/user/updateAvatar?id=${id}`
	}
}
}
</script>
<style lang="less" scoped>
.avatar{
    float: left;
    /deep/.el-upload--picture-card{
         width: 150px;
        height: 150px;
    }
    img{
         width: 100%;
        height: 100%;
    }
    .el-button{
        position: relative;
    top: -31px;
    }
}
.userInfo{
    float: left;
    margin-left: 70px;
}

</style>